<template>
	<!-- 专题详情--新闻、视频、文件 -->
	<div class="public_content news_content over-h">
		<!--左侧导航区开始-->
		<div class="public_content_left news_slide">
			<ul class="public_nav_vertical">
				<li>
					<div class="public_nav_vertical_title">
						<img src="~@/assets/img/special_title.png" class="po-re top-2b">
						<span class="fcolor-00">专题</span>
					</div>
					<dl class="public_nav_vertical_child">
		                <dd v-for="(item,index) in navList" @click="addClassHandle(index)" :class="{ 'child_click_dd':index==current}">
							<!-- <router-link :to="{path: '/news-detail'}"> -->
							<div class="fcolor-99 p-0-20">
								{{ item.name }}<i class="child_click_i"></i>
							</div>
							<!-- </router-link> -->
		                </dd>                    						       
					</dl>
				</li>
			</ul>    			
		</div>
		<!--左侧导航区结束-->
		<!--右侧内容-->	
		<div class="public_content_right over-h">
		    <!--新闻内容-->
		    <div v-if="type == 'news'" key="news" class="public_content_right_l pr-10 pull-left w-630 hr-sr-gray2">
		        <!--标题开始-->
		        <h2 class="center-text hr-sb-gray2 pb-15 fcolor-11 fsize-28" v-html="newsData.title"></h2>
		        <!--标题结束-->
		        <!--作者及时间开始-->
				<div class="w-all mt-10 over-h">
					<span class="fl w-50b center-text fsize-14 fcolor-99">发布人：{{newsData.createBy}}</span>
					<span class="fr w-50b center-text fsize-14 fcolor-99">发表时间：{{newsData.createTime}}</span>
				</div>
		        <div class="fsize-14 ti-2 fcolor-11 lh-24 font-bold mt-20">
					<p class="text-l" v-html="newsData.description"></p>            
				</div>
		    </div>
			<!-- 视频内容-->
			<div v-if="type == 'video'" key="video" class="public_content_right_l pr-10 pull-left w-630 hr-sr-gray2">
			    <!--标题开始-->
			    <h2 class="center-text hr-sb-gray2 pb-15 fcolor-11 fsize-28" v-html="newsData.title"></h2>
			    <!--标题结束-->
			    <!--作者及时间开始-->
				<div class="w-all mt-10 over-h">
					<span class="fl w-50b center-text fsize-14 fcolor-99">发布人：{{newsData.createBy}}</span>
					<span class="fr w-50b center-text fsize-14 fcolor-99">发表时间：{{newsData.createTime}}</span>
				</div>
				<div class="video_container mt-20">
					<video 
						style="background-color: rgb(0, 0, 0); width: 100%; height: 100%; display: block;" 
						controls="controls" webkit-playsinline="" x-webkit-airplay="" preload="auto" data-role="txp_video_tag" 
						src="https://apd-219e97b80db01bdcf76765ad5b751278.v.smtcdns.com/vhot2.qqvideo.tc.qq.com/ARoMQuBZ4qfHwPg8aW4RVuaHGIQKkQtaIjZt_mD4cPFc/u0811cpihk3.mp4?sdtfrom=v1104&amp;guid=2198872e80efd63f2b31ce1bf42ae76f&amp;vkey=89749831F9049C6E81BB2E5799E7F4F36236738B7DEE5A9BF27EB97602865A2EE855043449A608B62E6F168003095DAA96F4B0A402166192D715AAE3907EDFEEA29B9557906DD82079AF2D42A28441FFC779E3117EE79D5CF6C979D370E33CEF89A8931E738AD32A0A6965B3101C3A05D1F2DA01D19C648C">
					</video>
				</div>
			    <div class="fsize-14 ti-2 fcolor-11 lh-24 font-bold mt-20">
					<p class="text-l" v-html="newsData.description"></p>            
				</div>
			</div>
			<!--文件内容-->
			<div v-if="type == 'file'" key="file" class="public_content_right_l pr-10 pull-left w-630 hr-sr-gray2">
			    <div class="over-h">
			    	<!--左侧图片开始-->
			    	<div class="w-240 h-180 pull-left mr-20">
			    	    <img :src="newsData.imagePath" class="di-b w-all">
			    	</div>
			    	<div class="pull-right">
			    	    <h2 class="fsize-24 fcolor-11" v-html="newsData.title"></h2>
			    	    <div class="fcolor-33 fsize-14 lh-30 mt-10">
			    	        <p>
			    	            <span>发布人：</span><span>{{newsData.createBy}}</span>
			    	        </p>
							<p>
							    <span>发布时间：</span><span>{{newsData.createTime}}</span>
							</p>
			    	        <p>
			    	            <span class="pull-left">简&emsp;&emsp;介：</span>
			    	            <span class="di-ib pull-left w-300 fcolor-808080 lh-26" v-html="newsData.description"></span>
			    	        </p>
			    	    </div>
			    	</div>
			    </div>
			    <div class="meeting_content mt-20">
			        <p>
			            <i class="public_mark_org"></i>
			            资料内容
			        </p>
			        <div class="meeting_list_detail" v-html="newsData.description"></div>
			    </div>
			</div>
		    <!--中间新闻内容结束-->
			<div class="public_content_right_r pull-right w-280 slide_r_news">
			    <div class="public_card_title bg-img-card fcolor-white">
			    	<span class="fsize-18 pl-15">专题新闻</span>
			    </div>
				<ol class="public_card_content news_newsranking" v-if="newsList.length > 0">
				    <li class="lh-30" 
						v-for="(item,index) in newsList.slice(0,10)"
						@click="getNewsDetail(item.id)">
						<span v-html="item.title"></span>  
				    </li>
				</ol>
			</div> 
		</div>	
	</div>
</template>

<script>
	import '@/assets/css/common.css';
	export default {
		data() {
			return {
				id:'',//专题新闻、视频、文件的id
				seminarId:'',//专题 id
				type:'',  //news、video、file
				navList:[], //左侧专题列表
				newsData:{},
				newsList:[],// 当前专题的新闻列表
				current:null   //当前高亮的左侧导航下标
			}
		},
		mounted(){
			this.init()
		},
		methods: {
			init(){
				this.id = this.$route.params.id;
				this.type = this.$route.params.type;
				this.$parent.$data.current = 2;
				this.seminarId = sessionStorage.getItem('seminarId');
				this.getSeminarList();
				this.getDetail(this.id);
				this.getSeminarNewsData();
			},
			//左侧专题列表
			getSeminarList(){
				this.$axios.get(`web/subject/listAll`).then(res => {
					if(res.data && res.data.code === 0){
						this.navList = res.data.data
					}else {
						this.$message.error(res.data.msg)
					}		
				})
			},
			getNewsDetail(id){
				this.type = 'news';
				this.getDetail(id);
			},
			//获取详情
			getDetail(id){  
				this.$axios.get(`web/subject/getContentById`,{'id':id}).then(res => {
					if(res.data && res.data.code === 0){
						this.newsData = res.data.data
					}else {
						this.$message.error(res.data.msg)
					}		
				})
			},
			//专题的新闻
			getSeminarNewsData(){
				this.$axios.get(`web/subject/getSettingById`,{'subjectId':this.seminarId,'configType':'news'}).then(res => {
					if(res.data && res.data.code === 0){
						this.newsList = res.data.data
					}else {
						this.$message.error(res.data.msg)
					}		
				})
			}, 
			addClassHandle(index){
				this.current = index
			}
		}
	}
</script>

<style scoped>
	.public_content{
		box-sizing: border-box;
		width: 1200px;
		margin: 10px auto;
		padding: 0 16px;
		margin-bottom: 30px;
		border-radius: 3px;
		border-top-left-radius: 0;
		border-top-right-radius: 0;
		padding-top: 16px;
		padding-bottom: 16px;
		background-color: #f8f4eb;
	}
	/* 左侧导航 */
	.public_content_left{
		width: 200px;
		float: left;
		background: #fff;
	}
	.public_nav_vertical{
    box-shadow: 0 0 12px 0 rgba(4, 0, 0, 0.12);
    border: solid 1px rgba(245, 245, 245, 1);
}
.public_nav_vertical li .public_nav_vertical_title{
    height: 50px;
    line-height: 50px;
    font-size: 18px;
    padding: 0 20px;
    font-family: 微软雅黑;
    border-bottom: solid 1px #dfdfdf;
}
.public_nav_vertical dl dd{
    border-bottom: solid 1px #f5f5f5;
    height: 42px;
    line-height: 42px;
    font-size: 14px;
}
.public_nav_vertical dl dd a{
    display: block;
    padding: 0 20px;
    font-weight: 500;
    color: #999;
}
.public_nav_vertical dl dd i{
    float: right;
    margin-top: 16px;
    border-style: solid;
    border-color: transparent transparent transparent transparent;
    border-width: 5px 0 5px 8px;
    text-align: right;
}
.public_nav_vertical_child dd:hover{
    background: rgba(255, 235, 235, .8);
}
.public_nav_vertical_child .child_click_dd{
    background: rgba(255, 235, 235, .8);
}
.child_click_dd .child_click_i{
    border-color: transparent transparent transparent #cc0000;
}
	/*左侧导航结束*/
	/* 右侧内容 */
	.public_content_right{
		width: 960px;
		min-height: 410px;
		box-sizing: border-box;
		padding: 15px;
		float: right;
		background: #fff;
	}
	.public_content_right_l{
		min-height: 300px;
	}
	ol.public_card_content{
		padding-left: 22px;
	}
	ol.public_card_content > li{
		display: list-item;
		list-style: decimal;
		width: 100%;
		vertical-align: top;
		font-size: 14px;
		counter-increment: chapter;
	}
	.public_card_content span{
		display: inline-block;
		width: 100%;
		color: #333;
		vertical-align: top;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.public_card_content li:hover span{
		color: #ff3032;
		cursor:pointer;
	}
	.public_mark_org{
		display: inline-block;
		height: 18px;
		width: 4px;
		background-color:  #ff9776;
		margin-right: 10px;
	}
</style>